<script setup lang="ts">


import { onMounted, reactive,ref } from 'vue'
import ChartsWordCloud from "@/Components/ChartsWordCloud.vue";
import {typeUserChat} from "@/store/dataType";
import IconCloudSvg from "@/svg/IconCloudSvg.vue";
import IconAnaSumSvg from "@/svg/IconAnaSumSvg.vue";
import ChartsLine from "@/Components/ChartsLine.vue";
import {anaDataDate, anaDataTime} from "@/utils/anaData";
import {findAllUserChatByAccountName} from "@/Network/chatApi";
import IconLineChatSvg from "@/svg/IconLineChartSvg.vue";
import IconLineChartSvg from "@/svg/IconLineChartSvg.vue";
import ChartsPie from "@/Components/ChartsPie.vue";
import IconFireSvg from "@/svg/IconFireSvg.vue";
import router from "@/Router";

interface DataItem {
  name: string,
  value: number
}
interface typeChartsLineData{
  titleText:string,
  xAxisData:string,
  seriesData:string
}

type Props = {
  chatData: DataItem[],
  chatCount:string,
  chatAnswerLength:string,
  chatQuestionLength:string,
}

let props = defineProps<Props>()
let cloudData = ref()
cloudData.value = props.chatData.sort((b, a) => a.value - b.value)
console.log(cloudData.value)
const state = reactive({
  chartOptions: {
    series: [
      {
        gridSize: 20,
        data: cloudData.value
      },
    ],
  },
})



let dateNameList = ref<string[]>([])
let dateValueList = ref<number[]>([])
let dateCountSortList = ref<DataItem[]>([])
let mostDateName = ref()
let mostDateValue = ref()
let chatData = ref<typeUserChat[]>()
let noDataSign = ref(false)
findAllUserChatByAccountName(localStorage.getItem("accountName")).then(res=>{
  if(res.data.length==0){
    noDataSign.value == true
  }
  chatData.value = res.data
  // console.log(chatData.value)
  let timeData = anaDataTime(chatData.value,"createTime",7)
  console.log("$$$$$")
  let searchWord = `at ${timeData[0].name}`
  for(let i = 0; i<chatData.value?.length; i++){
    if(chatData.value[i].createTime.includes(searchWord)){
      localStorage.setItem("mostQuestion",chatData.value[i].question)
      break;
    }
  }
  // console.log(searchWord)
  localStorage.setItem("timeData",JSON.stringify(timeData))

  let dateData = anaDataDate(chatData.value,"createTime")
  dateCountSortList.value = anaDataDate(chatData.value,"createTime").sort((b, a) => a.value - b.value)
  mostDateName.value = dateCountSortList.value[0].name
  mostDateValue.value = dateCountSortList.value[0].value
  console.log("↓")
  console.log(dateCountSortList.value)

  for(const ele of dateData){
    dateNameList.value.push(ele.name)
    dateValueList.value.push(ele.value)
  }
  // xAxisData
  localStorage.setItem("dateNameList",JSON.stringify(dateNameList.value))
  // seriesData
  localStorage.setItem("dateValueList",JSON.stringify(dateValueList.value))
})
let chartsLineData=ref({
  //通过传key的名字，来告诉子组件应该 本地获取（localStorage）什么key
  titleText:"",
  xAxisData:"dateNameList",
  seriesData:"dateValueList"
})


onMounted(() => {
})

let color = [
  "#ebfcd2","#91c59e"
]

function goToChat () {
  router.push("/chat")
}
</script>



<template>
  <template v-if="chatQuestionLength==0">
    <div class="flex flex-col gap-2 w-full h-full justify-center items-center bg-gradient-to-t from-#c5ead0 to-white font-bold text-8 text-green-5">
      <div>暂无数据</div>
      <button @click="goToChat" class="bg-green-5 text-white rounded-xl p-3 text-7">去对话吧</button>
    </div>
  </template>
  <template v-else>
    <div class="flex w-full h-full  gap-3 ">
      <div class="w-50%  flex flex-col gap-3">
        <div class="h-35% bg-white rounded-2 flex flex-col gap-3 p-3">
          <div class="flex items-center justify-start gap-2 text-gray-7">
            <icon-ana-sum-svg class="w-6 h-6"></icon-ana-sum-svg>
            <div class="font-bold text-5">数据总览</div>
          </div>
          <div class="grid grid-rows-1 grid-flow-col gap-8 h-full m-5 ml-10">
            <div class=" flex flex-col gap-2">
              <div>目前已问次数：</div>
              <div class="text-10 font-bold font-italic">{{props.chatCount}}</div>
              <div class="text-gray text-3.5">您已超过70%的用户</div>
            </div>
            <div class=" flex flex-col gap-2">
              <div>已产生问题字数：</div>
              <div class="text-10 font-bold font-italic text-#009e7d">{{props.chatQuestionLength}}</div>
              <div class="text-gray text-3.5">提出问题比解决更重要</div>
            </div>
            <div class=" flex flex-col gap-2">
              <div>已生成回答字数：</div>
              <div class="text-10 font-bold font-italic text-#22c55e">{{props.chatAnswerLength}}</div>
              <div class="text-gray text-3.5">碳知道 竭诚为您服务</div>
            </div>
          </div>
        </div>
        <div class="grow bg-white rounded-2 mb-3 flex flex-col gap-3 p-3">
          <div class="flex items-center justify-start gap-2 text-gray-7">
            <icon-cloud-svg class="w-7 h-7"></icon-cloud-svg>
            <div class="font-bold text-5">词云分析</div>
          </div>
          <div class="flex h-full justify-start items-start gap-4 mx-5">
            <charts-word-cloud :options="state.chartOptions" class="py-3 w-83% h-full bg-gradient-to-b from-#c5ead0 to-white rounded-3 border-4 border-#aae1b8"></charts-word-cloud>
            <!--          涉及 对象数组排序-->
            <div class="flex flex-col gap-2">
              <div>出现最多</div>
              <div class="text-8 font-bold text-#009e7d">{{ cloudData[0].name }}</div>
              <div class="mt--4 font-bold text-#009e7d text-right">{{ cloudData[0].value }}次</div>
              <div class="mt-5">出现第二多</div>
              <div class="text-7 font-bold text-green-5">{{ cloudData[1].name }}</div>
              <div class="mt--4 font-bold text-green-5 text-right">{{ cloudData[1].value }} 次</div>

            </div>
          </div>
        </div>
      </div>
      <div class="w-50%  flex flex-col gap-3 mr-4">
        <div class="h-60% bg-white rounded-2 p-3 pl-3.5">
          <div class="flex items-center justify-start gap-3 text-gray-7">
            <icon-fire-svg class="w-6 h-6"></icon-fire-svg>
            <div class="font-bold text-5">提问活跃时间</div>
          </div>
          <charts-pie class="w-full h-full" ></charts-pie>
        </div>
        <div class="h-40% bg-white rounded-2 flex flex-col p-3  pb-2 pl-3.5 mb-3">
          <div class="flex items-center justify-start gap-3 text-gray-7">
            <icon-line-chart-svg class="w-5.5 h-5.5"></icon-line-chart-svg>
            <div class="font-bold text-5">近7日问答趋势</div>
          </div>
          <charts-line :chartsLineData="chartsLineData"
                       class="w-full h-full mt--9 ">
          </charts-line>
          <div class="flex justify-end items-end gap-2 mr-5 mt-1 ">
            <div>在</div>
            <div class="text-5 text-#009e7d font-italic font-bold">{{mostDateName}}</div>
            <div>，提问最多。</div>
            <div>达到</div>
            <div class="text-5 text-#009e7d font-italic font-bold">{{mostDateValue}}</div>
            <div>次</div>
          </div>

        </div>
      </div>
    </div>
  </template>
</template>



<style scoped lang="less">
</style>